<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form
        ref="formValidate"
        v-loading="fullscreenLoading"
        class="formValidate mt20"
        :rules="ruleValidate"
        :model="formValidate"
        label-width="120px"
        @submit.native.prevent
      >
        <el-form-item label="标题：" prop="title">
          <el-input
            v-model="formValidate.title"
            maxlength="250"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-row>
          <el-col :xs="18" :sm="18" :md="18" :lg="12" :xl="12">
            <el-form-item label="教学视频：" prop="videoUrl">
              <el-input
                v-model="videoUrl"
                placeholder="请输入教学视频链接"
                :disabled="false"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="4"
            style="padding-left: 20px"
            :sm="4"
            :md="4"
            :lg="8"
            :xl="8"
          >
            <el-button v-if="videoUrl" @click="zh_uploadFile"
              >确认添加</el-button
            >
            <el-button
              v-if="!videoUrl"
              icon="el-icon-upload"
              @click="modalPicTap('3', '', '', 'video')"
              >上传视频</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="iview-video-style" v-if="formValidate.videoUrl">
              <video
                style="
                  width: 100%;
                  height: 100% !important;
                  border-radius: 10px;
                "
                :src="formValidate.videoUrl"
                controls
                autoplay
                muted
              >
                您的浏览器不支持 video 标签。
              </video>
              <div class="mark"></div>
              <span
                class="iconv iconfont iconmd-trash"
                @click="delVideo()"
              ></span>
            </div>
          </el-col>
        </el-row>
        <el-form-item label="生效日期：" prop="startDate">
          <el-date-picker
            v-model="formValidate.startDate"
            size="small"
            type="date"
            placeholder="生效日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            style="width: 360px; height: 34px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="答题截至日期：" prop="endDate">
          <el-date-picker
            v-model="formValidate.endDate"
            size="small"
            type="datetime"
            placeholder="答题截至日期"
            format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            style="width: 360px; height: 34px"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 选择题目  分类+题目 -->
        <el-form-item label="选择题目：">
          <el-button type="primary" @click="chooseArticle">选择题目</el-button>
        </el-form-item>

        <el-row
          v-for="(item, key) in formValidate.artList"
          :key="key + 'art'"
          class="row_style"
        >
          <el-col :span="18" style="font-size: 16px" class="title_style">
            {{ item.title }}
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="delItem(item)"> 删除 </el-button>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="saveAction()"
            v-hasPermi="['admin:bargain:update']"
            >保存</el-button
          >
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  bargainSaveApi,
  bargainInfoApi,
  bargainUpdateApi,
} from "@/api/marketing";
export default {
  data() {
    return {
      pickerOptions: this.$timeOptions,
      listLoadingPink: false,
      dialogVisible: false,
      fullscreenLoading: false,
      loading: false,
      formValidate: {
        title: "",
        videoUrl: "",
        startDate: "",
        endDate: "",
        //题库中选中的题目
        artList: [],
      },
      videoUrl: "",
      categoryTreeData: [],
      ruleValidate: {
        title: [
          {
            required: true,
            message: "请输入日日练标题",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            message: "开始日期不为空",
            trigger: "blur",
          },
        ],
        答题截至日期te: [
          {
            required: true,
            message: "答题截至日期不为空",
            trigger: "blur",
          },
        ],
      },
      timeVal: "",
    };
  },

  mounted() {
    if (this.$route.params.id) {
      this.getInfo();
    }
  },
  methods: {
    //选择题目
    chooseArticle() {
      let _this = this;
      this.$modalArticle(function (artList) {
        _this.formValidate.artList = artList;
      }, this.formValidate.artList);
    },

    //获取信息
    getInfo() {
      bargainInfoApi({
        id: this.$route.params.id,
      }).then((res) => {
        this.formValidate = res;
      });
    },

    saveAction() {
      if (this.$route.params.id) {
        this.handerUpdate();
      } else {
        this.handlerSave();
      }
    },
    msToDate(msec) {
      let datetime = new Date(msec);
      let year = datetime.getFullYear();
      let month = datetime.getMonth();
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let minute = datetime.getMinutes();
      let second = datetime.getSeconds();

      let result1 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date) +
        " " +
        (hour + 1 < 10 ? "0" + hour : hour) +
        ":" +
        (minute + 1 < 10 ? "0" + minute : minute) +
        ":" +
        (second + 1 < 10 ? "0" + second : second);

      let result2 =
        year +
        "-" +
        (month + 1 >= 10 ? month + 1 : "0" + (month + 1)) +
        "-" +
        (date + 1 < 10 ? "0" + date : date);

      let result = {
        hasTime: result1,
        withoutTime: result2,
      };

      return result;
    },

    //保存接口
    handlerSave() {
      this.loading = true;
      this.formValidate.endDate=this.msToDate(this.formValidate.endDate).hasTime
      bargainSaveApi(this.formValidate)
        .then((res) => {
          this.$message.success("编辑成功");
          this.loading = false;
          this.$router.push({
            path: "/course/daytraining",
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //保存提交后台
    handerUpdate() {
      this.loading = true;
      bargainUpdateApi(this.formValidate)
        .then((res) => {
          this.$message.success("编辑成功");
          this.loading = false;
          this.$router.push({
            path: "/course/daytraining",
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },

    handleClose() {
      this.dialogVisible = false;
    },
    show() {
      this.dialogVisible = true;
    },

    modalPicTap(tit, num, i, status) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          let videoInfo = img[0];
          console.log(videoInfo);
          if (videoInfo.attType !== "video/mp4") {
            this.$message.warning("请重新选择视频！");
          } else {
            _this.$set(_this.formValidate, "videoUrl", videoInfo.sattDir);
          }
        },
        tit,
        "content"
      );
    },

    //删除题目
    delItem(row) {
      this.formValidate.artList = this.formValidate.artList.filter((art) => {
        return art.id != row.id;
      });
    },

    delVideo() {
      let that = this;
      that.$set(that.formValidate, "videoUrl", "");
    },

    zh_uploadFile() {
      if (this.videoLink) {
        this.$set(this.formValidate, "videoUrl", this.videoLink);
      }
    },
  },
};
</script>

<style lang="scss">
.row_style {
  margin-top: 5px;
}

.title_style {
  padding: 0 30px;
}

.iview-video-style {
  width: 300px;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin: 0 120px 20px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
</style>